<template>
  <div style="font-size: 0.35rem">
    <div>
      <van-notice-bar
        left-icon="volume-o"
        wrapable
        :scrollable="false"
        text="为保护您的隐私，您的昵称将用于社区交流和医患沟通"
      />
    </div>
    <div
      style="
        border-bottom: 0.01rem solid #ccc;
        border-top: 0.01rem solid #ccc;
        margin-top: 0.3rem;
        height: 1rem;
        line-height: 1rem;
        width: 100%;
      "
    >
      <p style="width: 10%; float: left; margin-left: 0.2rem">昵称</p>
      <input
        type="text"
        v-model="inp"
        style="
          height: 1rem;
          width: 85%;
          line-height: 1rem;
          border: none;
          border-bottom: 0.01rem solid #ccc;
        "
      />
    </div>
    <p style="color: #c1c1c1; font-size: 0.25rem; margin-top: 0.2rem">
      昵称限制10个汉字或20个字母、数字
    </p>
    <button
      style="
        width: 100%;
        height: 1rem;
        border: none;
        background-color: #0099ff;
        color: white;
        font-size: 0.35rem;
        margin-top: 0.5rem;
      "
      @click="xiu"
    >
      确定修改
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
const inp = ref('')
const xiu=()=>{
  console.log(inp.value)
  localStorage.setItem('name',inp.value)
  router.push('/login')
}
</script>

<style></style>
